<!--
 * @Author: Bennty
 * @Date: 2024-07-11 14:45:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-01 09:03:28
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="结算方式" @close="handleClose" width="20%" destroy-on-close >
        <el-form :model="formData" ref="form">
            <el-form-item label="客户名称">
                {{ props.data.customerName }}
            </el-form-item>
            <el-form-item label="成交状态">
                <span :class="props?.data?.dealStatus !== '0'?'completed':'uncompleted'">{{ props?.data?.dealStatus !== '0'?'已成交':'未成交' }}</span>
            </el-form-item>
            <el-form-item label="结账方式" prop="settlementMethod">
                <el-select placeholder="请选择" v-model="formData.settlementMethod" >
                    <el-option v-for="item in settlement" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="付款周期" prop="paymentCycle">
                <el-row>
                    <el-col :span="21">
                        <el-input v-model.number="formData.paymentCycle" placeholder="请输入" :disabled="cycleDisable" >
                            <template #append>天</template>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { getCustomerByIdApi,updateSettleMethodApi } from '@/api/sj/customer-crm/index';

const form = ref<FormInstance>();
const props = defineProps(['visible','data','settlement']);
const cycleDisable = ref(true);

const emit = defineEmits(['submit','close']);

const customerInfo = ref<any>()

const formData = ref<any>({
    id: undefined,
    settlementMethod: undefined,
    paymentCycle: undefined
});

const getCustomerById = async (id:string) => {
    const { data } = await getCustomerByIdApi(id);
    customerInfo.value = data;
    formData.value.id = data.id;
    formData.value.settlementMethod = data.settlementMethod;
    formData.value.paymentCycle = data.paymentCycle;
};

watch(()=>formData.value.settlementMethod, ()=>{
    if(formData.value.settlementMethod == '1'){
        cycleDisable.value = true;
        formData.value.paymentCycle = 0;
    }else if(formData.value.settlementMethod == '2'){
        cycleDisable.value = false;
        formData.value.paymentCycle = 30;
    }else if(formData.value.settlementMethod == '3'){
        cycleDisable.value = false;
    };
    
},{deep: true});

watch(()=>props.data,()=>{
    getCustomerById(props.data.id);
},{deep: true});

const handleSubmit = async () => {
    await updateSettleMethodApi(formData.value).then(()=>{
        emit('submit',true);
        handleClose();
    }).catch((error)=>{
        emit('submit',false);
    });
};

const handleClose = ()=>{
    form.value?.resetFields();
    emit('close');
};

</script>

<style scoped lang="scss">
.completed{
    color: yellowgreen
}
.uncompleted{
    color: orange
}
.dialog-footer{
    display:flex;
    justify-content: center;
}
</style>